<%--
  Created by IntelliJ IDEA.
  User: 陈fairy
  Date: 2018-12-30
  Time: 9:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户角色</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <script>
        $(function () {
            $("#role").bootstrapTable({
                url:'${pageContext.request.contextPath}/Role/queryRole',
                height:300,
                columns:[
                    {checkbox: true},
                    {field: 'id', title: '编号'},
                    {field: 'rname', title: '职位'},
                    // {field: 'wage', title: '基本工资'},
                    // {field: 'commission', title: '提成'},
                    {
                        title:'操作',
                            formatter:function (value,row,index) {
                                return "<input type='button' class='btn' value='分配权限' onclick='toPer("+row.id+")'/>" ;
                        }
                    },
                ]
            })
        });
        function dofenpei() {
            //1.弹出一个对话框,显示树形菜单
            $("#ts").modal('show') ;
        }
        function toadd() {
            $("#modelId").modal("show") ;
        }
    </script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">用户角色</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="doadd()" class="btn btn-primary" data-toggle="modal" data-target="#addModal"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                <%--<button onclick="doDel()" class="btn btn-primary"><span class="glyphicon glyphicon-trash" ></span>&nbsp;&nbsp;删除</button>--%>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <table id="role"></table>
    </div>
</div>
</div>
<!--增加模态框-->
<div class="modal fade" id="modelId">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">增加</button>
            </div>
        </div>
    </div>
</div>
<%--分配角色显示框--%>
<div class="modal fade" id="ts">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="searchTree"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">分配</button>
            </div>
        </div>
    </div>
</div>
<script>

    var role;

    var nodeCheckedSilent = false;

    function nodeChecked(event, node) {
        if (nodeCheckedSilent) {
            return;
        }
        nodeCheckedSilent = true;
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }

    var nodeUncheckedSilent = false;

    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }

    //选中全部父节点
    function checkAllParent(node) {
        $('#searchTree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        } else {
            checkAllParent(parentNode);
        }
    }
    //取消全部父节点
    function uncheckAllParent(node) {
        $('#searchTree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
        var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        }
        var isAllUnchecked = true; //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }
        if (isAllUnchecked) {
            uncheckAllParent(parentNode);
        }

    }

    //级联选中所有子节点
    function checkAllSon(node) {
        $('#searchTree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                checkAllSon(node.nodes[i]);
            }
        }
    }
    //级联取消所有子节点
    function uncheckAllSon(node) {
        $('#searchTree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                uncheckAllSon(node.nodes[i]);
            }
        }
    }

    function toPer(roleId) {
        var a = 0;
        console.log(roleId);
        $("#ts").modal('show');
        $("#ts").on("shown.bs.modal",function () {
            if(++a==1){
                $.post("/Role/toPer",{"roleId":roleId},function (data) {
                    alert(data);
                    $("#searchTree").treeview({
                        showCheckbox:true,
                        data:data,
                        onNodeChecked: nodeChecked,
                        onNodeUnchecked: nodeUnchecked
                    })
                })
            }
        })
    }
    function doPer() {
        var roleId = role;
        var pers = "";
        var perChecked = $("#searchTree").treeview("getChecked");
        $.each(perChecked,function (i,n) {
            pers += n.permissionId + "-";
        })
        $.post("/Role/doPer",{role:roleId,pers:pers},function (data) {
            if(data.msg=="1"){
                $("#ts").modal('hide');
            }
        })
    }

</script>

</body>
</html>
